<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.box {
			box-sizing: border-box;
			margin: 0 auto;
			width: 480px;
			height: 590px;
			background-image: url(./img/bg.png);
		}

		/* 按钮 */
		.minus,
		.add {
			display: inline-block;
			width: 52px;
			height: 44px;
			cursor: pointer;
			vertical-align: middle;
			background-image: url(./img/sub.png);
		}

		.add {
			background-image: url(./img/add.png);
		}

		/* 文本框 */
		.pronum,
		.info {
			box-sizing: border-box;
			width: 40px;
			height: 35px;
			line-height: 35px;
			background: white;
			border-radius: 3px;
			text-align: center;
			vertical-align: middle;
		}

		.pronum {
			display: inline-block;
		}

		/* 头部 */
		.top {
			padding: 50px 20px 0;
			height: 387px;
		}

		.hang {
			margin-bottom: 20px;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
		}

		.hang .info {
			box-sizing: border-box;
			padding: 0 10px;
			width: 260px;
			color: white;
			font-size: 14px;
			text-align: left;
			line-height: 35px;
			background: #171818;
		}

		.bottom {
			padding-top: 20px;
			color: #878787;
			padding-left: 50px;
			line-height: 40px;
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="box" id="computedBox">
			<div class="top">
				<div class="hang" v-for="(item,index) in list" :key="item.id">
					<i class="minus" @click='minus(item.id)'></i>
					<span class="pronum">{{ item.count }}</span>
					<i class="add" @click='add(item.id)'></i>
					<span class="info">单价：{{ item.price }} 元 &nbsp;&nbsp;
						小计：<em> {{(item.count*item.price).toFixed(2)}} </em>元</span>
				</div>
			</div>
			<div class="bottom">
				商品合计：<span class="pronum">{{ all.totalCount }}</span> &nbsp; 件
				<br>
				共花费了：<span class="pronum"> {{ all.totalExpend }} </span> &nbsp; 元
				<br>
				最贵商品单价：<span class="pronum"> {{ all.highPrice }} </span> &nbsp; 元
			</div>
		</div>

	</div>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				list: [
					{
						id: 0,
						count: 3,
						price: 20
					},
					{
						id: 1,
						count: 2,
						price: 14
					},
					{
						id: 3,
						count: 0,
						price: 10
					},
					{
						id: 4,
						count: 0,
						price: 16
					},
					{
						id: 5,
						count: 0,
						price: 22
					}
				]
			},
			computed: {
				all() {
					let totalCount = 0
					let totalExpend = 0
					let allPrice = []

					this.list.forEach(item => {
						totalCount += item.count
						totalExpend += item.count * item.price
						allPrice.push(item.count > 0 ? item.price : '')

					})

					return {
						totalCount,
						totalExpend,
						highPrice: Math.max(...allPrice)
					}
				}
			},
			methods: {
				minus(id) {
					let objitem = this.list.find(item => item.id == id)
					if (objitem.count <= 0) return
					objitem.count--
				},
				add(id) {
					let objitem = this.list.find(item => item.id == id)
					objitem.count++

				}
			}

		})
	</script>
</body>

</html>